<template>
  <div class="app-container">
    <el-row :gutter="20">
      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
        <pane size="16">
          <el-col>
            <div class="head-container">
              <el-input v-model="deptName" placeholder="请输入材料" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
            </div>
            <div class="head-container">
              <el-tree :data="parentAccountName" :props="defaultProps" :expand-on-click-node="true"
              :filter-node-method="filterNode" ref="tree" default-expand-all highlight-current
              @node-click="handleNodeClick" />
            </div>
          </el-col>
        </pane>
        
        <pane size="84">
          <el-col>
              <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
                <el-form-item label="编号" prop="编号">
                  <el-input v-model="queryParams.编号" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="品名" prop="品名">
                  <el-input v-model="queryParams.品名" placeholder="请输入品名" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="类别" prop="类别">
                  <el-input v-model="queryParams.类别" placeholder="请输入类别" clearable @keyup.enter.native="handleQuery" />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>

              </el-form>
              
              <el-row :gutter="10" class="mb8">
                <!-- <el-col :span="1.5">
                  <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
                </el-col> -->
                <!-- <el-col :span="1.5">
                  <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
                    @click="handleUpdate">修改</el-button>
                </el-col> -->
                <!-- <el-col :span="1.5">
                  <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="handleDelete">删除</el-button>
                </el-col> -->
                <el-col :span="1.5">
                  <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
              </el-row>
              
        <el-tooltip placement="top">
          <div slot="content">点击任意一行列，即可在下方查看清单组成记录</div>
        <el-table :data="productData" v-loading="loading" :row-class-name="rowClassName" @row-click="showTab">
          <el-table-column prop="productNo" align="center" label="产品代号" />
          <el-table-column prop="img" align="center" label="图片">
            <template slot-scope="scope">
              <image-preview :src="scope.row.img" :width="50" :height="50" />
            </template>
          </el-table-column>
           <el-table-column prop="productName" align="center" label="产品名称" />
          <el-table-column prop="productImg" align="center" label="产品图号" />
          <el-table-column prop="productSpec" align="center" label="产品规格" />
          <el-table-column label="操作" align="center" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleUpdate( scope.row)">修改</el-button>
              <el-button type="text" size="mini" @click="handleDelete( scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination  :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
       </el-tooltip> 
          
       
         <div v-if="showCard">
          <h2 align="center">{{ productName }}清单组成</h2>
          <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddMaterial">新增</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
                @click="handleupdateMaterial">修改</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                @click="handledeleteMaterial">删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row> -->

          <el-form ref="form" :disabled="isEdit" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="产品代号" prop="productNo">
                  <el-input v-model="form.productNo" placeholder="请输入产品代号" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称" prop="productName">
                  <el-input v-model="form.productName" placeholder="请输入产品名称" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品规格" prop="productSpec">
                  <el-input v-model="form.productSpec" placeholder="产品规格" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="主单位" prop="mainUnit">
                  <el-input v-model="form.mainUnit" placeholder="请输入主单位" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="副单位" prop="subUnit">
                  <el-input v-model="form.subUnit" placeholder="请输入副单位" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="转化率(%)" prop="conversionRate">
                  <el-input v-model="form.conversionRate" placeholder="请输入损耗率" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="8">
                <el-form-item label="修改人" prop="modifyUser">
                  <el-input v-model="form.modifyUser" placeholder="请输入修改人" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="修改时间" prop="modifyTime">
                  <el-input v-model="form.modifyTime" placeholder="请输入修改时间" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="BOM编号" prop="bomNo">
                  <el-input v-model="form.bomNo" placeholder="请输入BOM编号" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row>
              <el-col :span="8">
                <el-form-item label="单件成本" prop="unitCost">
                  <el-input v-model="form.unitCost" placeholder="请输入单件成本" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单件加工费" prop="unitProcessCost">
                  <el-input v-model="form.unitProcessCost" placeholder="请输入单件加工费" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="版本号" prop="version">
                  <el-input v-model="form.version" placeholder="请输入版本号" :disabled="true" />
                </el-form-item>
              </el-col>
            </el-row>
            
          </el-form>
          
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAddMaterial">新增子件</el-button>
            </el-col>
              <el-col el-col :span="1.5">  
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
              </el-col>
          </el-row>
          
          <el-table 
          :row-style="rowStyle" :data="materialData" style="width: 100%;
          margin-bottom: 20px;" v-loading="loading" row-key="productNo" border 
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @selection-change="handleSelectionChange">
            <el-table-column type="expand" align="center" label="子件">
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column prop="parentProductNo" align="center" label="上级产品代号" />
              <el-table-column prop="productNo" align="center" label="产品代号" />
              <el-table-column prop="img" align="center" label="产品图片">
                <template slot-scope="scope">
                  <image-preview :src="scope.row.img" :width="50" :height="50" />
                </template>
              </el-table-column>
              <el-table-column prop="productName" align="center" label="产品名称" />
              <el-table-column prop="color" align="center" label="颜色" />
              <el-table-column prop="size" align="center" label="规格" />
              <el-table-column prop="type" align="center" label="类型(物品类型)" />
              <el-table-column prop="unit" align="center" label="单位" />
              <el-table-column prop="process" align="center" label="领用工序" />
              <el-table-column prop="mainUnit" align="center" label="主单位用量" />
              <el-table-column prop="subUnit" align="center" label="副单位用量" />
              <el-table-column prop="lossRate" align="center" label="损耗率(%)" />
              <el-table-column prop="department" align="center" label="领用部门" />
            </el-table-column>
            <el-table-column label="操作" align="center" width="150" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="handleupdateMaterial( scope.row)">修改</el-button>
                <el-button type="text" size="mini" @click="handledeleteMaterial( scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
         </div>
              
          </el-col>
        </pane>
      </splitpanes>
    </el-row>
    
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="产品代号" prop="productNo">
          <el-input v-model="form.productNo" placeholder="请输入产品代号" />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入产品名称"  />
        </el-form-item>
        <el-form-item label="产品图号" prop="productImg">
          <el-input v-model="form.productImg" placeholder="请输入产品图号"  />
        </el-form-item>
        <el-form-item label="产品规格" prop="productSpec">
          <el-input v-model="form.productSpec" placeholder="产品规格" />
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <ImageUpload v-model="form.img" :limit="1"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
      </div>
     </el-dialog>
     
     <!-- 材料  -->
      <el-dialog :title="titleMaterial" :visible.sync="openMaterial" width="800px" append-to-body>
        <el-form ref="formMaterial" :model="formMaterial" :rules="rulesMaterial" label-width="100px">
          
          <el-row>
            <el-col :span="12">
              <el-form-item label="上级产品代号" prop="parentProductNo">
                <el-input v-model="formMaterial.parentProductNo" style="width: 240px;" disabled placeholder="请输入上级产品代号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品代号" prop="productNo">
                <el-select v-model="formMaterial.productNo"  style="width: 240px;" @input="handleSelectProductNo" placeholder="请选择产品代号">
                  <el-option label="1001     产品1" value="1001"></el-option>
                  <el-option label="1002     产品2" value="1002"></el-option>
                  <el-option label="1003   产品3" value="1003"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品名称" prop="productName">
                <el-input v-model="formMaterial.productName" style="width: 240px;" placeholder="请输入产品名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="颜色" prop="color">
                <el-input v-model="formMaterial.color" style="width: 240px;" placeholder="请输入颜色" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row>
            <el-col :span="12">
              <el-form-item label="规格" prop="spec">
                <el-input v-model="formMaterial.spec" style="width: 240px;" placeholder="请输入规格" />
                <!-- <el-select v-model="formMaterial.size" style="width: 240px;" placeholder="请选择规格">
                  <el-option label="" value="规格1"></el-option>
                  <el-option label="规格2" value="规格2"></el-option>
                  <el-option label="规格3" value="规格3"></el-option>
                </el-select> -->
              </el-form-item>
            </el-col>
              <el-col :span="12">
               <el-form-item label="类型" prop="type">
                <el-select v-model="formMaterial.type" style="width: 240px;" placeholder="请选择类型">
                  <el-option label="原材料" value="原材料"></el-option>
                  <el-option label="辅料" value="辅料"></el-option>
                  <el-option label="半成品" value="半成品"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
              <el-form-item label="单位" prop="unit">
                 <el-select v-model="formMaterial.unit" style="width: 240px;" placeholder="请选择单位">
                  <el-option label="件" value="件"></el-option>
                  <el-option label="克" value="克"></el-option>
                  <el-option label="公斤" value="公斤"></el-option>
                  <el-option label="毫升" value="毫升"></el-option>
                  <el-option label="升" value="升"></el-option>
                  <el-option label="张" value="张"></el-option>
                  <el-option label="支" value="支"></el-option>
                  <el-option label="个" value="个"></el-option>
                  <el-option label="套" value="套"></el-option>
                  <el-option label="箱" value="箱"></el-option>
                  <el-option label="立方米" value="立方米"></el-option>
                  <el-option label="平方米" value="平方米"></el-option>
                 </el-select>
              </el-form-item>             
            </el-col> -->
          </el-row>
          
          <el-row>
            <el-col :span="12">
              <el-form-item label="领用工序" prop="process">
                <el-select v-model="formMaterial.process" style="width: 240px;" placeholder="请选择领用工序">
                  <el-option label="制作" value="制作"></el-option>
                  <el-option label="加工" value="加工"></el-option>
                  <el-option label="包装" value="包装"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主单位用量" prop="mainUnit">
                <el-input v-model="formMaterial.mainUnit" style="width: 240px;" placeholder="请输入主单位用量" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row>
            <el-col :span="12">
              <el-form-item label="副单位用量" prop="subUnit">
                <el-input v-model="formMaterial.subUnit" style="width: 240px;" placeholder="请输入副单位用量" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="损耗率(%)" prop="lossRate">
                <el-input v-model="formMaterial.lossRate" style="width: 240px;" placeholder="请输入损耗率" />
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row>
            <el-col :span="12">
              <el-form-item label="领用部门" prop="department">
                <el-select v-model="formMaterial.department" style="width: 240px;" placeholder="请选择领用部门">
                  <el-option label="包装车间" value="包装车间"></el-option>
                  <el-option label="成型车间" value="成型车间"></el-option>
                  <el-option label="加工车间" value="加工车间"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="半成品" prop="halfProduct" v-if= "flag">
                <el-select v-model="formMaterial.halfProduct" style="width: 240px;" placeholder="请选择半成品">
                  <el-option label="盘子" value="盘子"></el-option>
                  <el-option label="瓶子" value="瓶子"></el-option>
                  <el-option label="袋子" value="袋子"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            
          </el-row>
          
          <el-row>
          
            <el-col :span="12">
              <el-form-item label="产品图片" prop="img">
                <ImageUpload v-model="formMaterial.img" :limit="1"/>
              </el-form-item>
            </el-col>
          </el-row>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormMaterial">确 定</el-button>
          <el-button @click="cancelMaterial">取 消</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
export default {
  components: { Splitpanes, Pane },
  data() {
    return {
      // 弹窗
      open: false,
      openMaterial: false,
      // 弹窗标题
      title: '',
      titleMaterial:'',
      // 弹窗表单
      form: {},
      formMaterial: {},
      // 弹窗表单验证规则
      rules: {
      },
      rulesMaterial: {
      },
      total: 0,
      productData1: [[{
        productNo: '10001',
        img: 'https://img.redocn.com/sheying/20160224/meiguihuazhi_5893058.jpg',
        productName: '产品1',
        productImg: '10001',
        productSpec: '规格1',
      }, {
        productNo: '10002',
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        productName: '产品2',
        productImg: '10002',
        productSpec: '规格2',
      }, {
        productNo: '10003',
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        productName: '产品3',
        productImg: '10003',
        productSpec: '规格3',
      }],[{
        productNo: '10004',
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        productName: '产品4',
        productImg: '10004',
        productSpec: '规格4',
      }, {
        productNo: '10005',
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        productName: '产品5',
        productImg: '10005',
        productSpec: '规格5',
      }, {
        productNo: '10006',
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        productName: '产品6',
        productImg: '10006',
        productSpec: '规格6',
      }]],
      productData: [],
      // 材料数据
      materialData:[{
          parentProductNo: '10001',
          productNo: '100011',
          productName: '塑胶',
          color: '红色',
          size: '规格1',
          type: '原材料',
          process: '领用工序1',
          mainUnit: '100',
          subUnit: '50',
          lossRate: '10',
          department: '领用部门1',
          halfProduct: '盘子',
          img: 'https://img.redocn.com/sheying/20160224/meiguihuazhi_5893058.jpg',
        },
        {
          parentProductNo: '10001',
          productNo: '100012',
          productName: '密胺',
          color: '蓝色',
          size: '规格2',
          type: '辅料',
          process: '领用工序2',
          mainUnit: '100',
          subUnit: '50',
          lossRate: '10',
          department: '领用部门2',
          halfProduct: '瓶子',
          img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          children:[{
            parentProductNo: '100012',
            productNo: '1000121',
            productName: '塑胶',
            color: '红色',
            size: '规格1',
            type: '原材料',
            process: '领用工序1',
            mainUnit: '100',
            subUnit: '50',
            lossRate: '10',
            department: '领用部门1',
            halfProduct: '盘子',
            img: 'https://img.redocn.com/sheying/20160224/meiguihuazhi_5893058.jpg',
            isSon: true,
          },
          {
            parentProductNo: '100012',
            productNo: '1000122',
            productName: '密胺',
            color: '蓝色',
            size: '规格2',
            type: '辅料',
            process: '领用工序2',
            mainUnit: '100',
            subUnit: '50',
            lossRate: '10',
            department: '领用部门2',
            halfProduct: '瓶子',
            img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            isSon:true,
          }]
      }],
      
      parentAccountName: [{
        label: '所有类别',
        children: [
          {
            label: '半成品类',
            children: [
              {
                label: '塑胶半成品类'
              },
              {
                label: '密胺半成品类'
              }]
          },
          {
            label: '成品类',
            children: [{
              label: '塑胶成品类'
            }, {
              label: '密胺成品类'
            }]
          }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      showSearch: true,
      single: false,
      multiple: false,
      tableData: [],
      rules: {},
      form: {},
      isEdit: false,
      showCard: true,
      flag: false,
      deptName: '',
      
      // 模拟数据
      productList:[{
        //productNo: '1001',
        productName: '产品1',
        color: '红色',
        process: '制作',
        mainUnit: '100',
        subUnit: '50',
        lossRate: '10',
        department: '包装车间',
        img: 'https://img.redocn.com/sheying/20160224/meiguihuazhi_5893058.jpg',
        halfProduct: '盘子',
        type: '原材料',
      },{
       // productNo: '1002',
        productName: '产品2',
        color: '蓝色',
        process: '加工',
        mainUnit: '100',
        subUnit: '50',
        lossRate: '10',
        department: '成型车间',
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        halfProduct: '瓶子',
        type: '辅料',
      },{
        //productNo: '1003',
        productName: '产品3',
        color: '绿色',
        process: '包装',
        mainUnit: '100',
        subUnit: '50',
        lossRate: '10',
        department: '加工车间',
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        halfProduct: '袋子',
        type: '半成品',
      }],
    }
  },
  mounted() {
    console.log(this.parentAccountName[0].children[0]);
    this.handleNodeClick(this.parentAccountName[0].children[0])
  },
  watch: {
    // 监听数据的变化, 判断是否是子数据
    materialData(value) {
      console.log(value)
      this.materialData.filter(item => {
        console.log(item)
        var children = item.children;
        children.filter(i => {
          i.parentMemberAccount = item.memberAccount
          i.isSon = true;
        })
      })
    }
  },
  
  methods: {
    
    //显示高亮
        rowClassName({ row }) {
          return row.productNo === this.productNo ? 'selected-row' : ''; // 判断是否选中
        },
    
    // 弹窗
    rowStyle({ row }) {
      if(row.isSon){
        return { background: 'skyblue' }
      }else{
        return {}
      } 
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.tableData = data
      if(data.label === '半成品类'){
        this.productData = this.productData1[0]
        this.flag = false
    }
      else if(data.label === '成品类'){
        this.productData = this.productData1[1]
        this.flag = true
      }
    },
    getList() { },
    handleAdd() {
      this.open = true;
      this.title = '新增成品信息';
      this.form = {};
     },
    handleUpdate(row) {
      this.form = row;
      console.log(row);
      this.open = true;
      this.title = '修改成品信息';
    },
    handleDelete(row) {
      this.$confirm('确认删除产品列表')
      .then(() => {
          this.productData.splice(this.productData.indexOf(row), 1);
          this.$message.success('删除成功');
          this.showCard = false
      })
    },
    submitForm() {
      this.open = false;
    },
    cancel() {
      this.open = false;
    },
    handleAddMaterial() {
      this.resetForm();
      this.formMaterial.parentProductNo = this.productNo;
      this.titleMaterial = '新增材料信息';
      this.openMaterial = true;
    },
    handleupdateMaterial(row) {
      this.formMaterial = row;
      this.openMaterial = true;
      this.titleMaterial = '修改材料信息';
    },
    handledeleteMaterial(row) {
      this.$confirm('确认删除材料列表')
      .then(() => {
        this.materialData.splice(this.materialData.indexof(row),1)
      })
    },
    submitFormMaterial() {
      this.openMaterial = false;
    },
    cancelMaterial() {
      this.openMaterial = false;
    },
    // 重置表单
    resetForm() {
      this.formMaterial = {
        parentProductNo: '',
        productNo: '',
        productName: '',
        spec: '',
        color: '',
        size: '',
        type: '',
        process: '',
        mainUnit: '',
        subUnit: '',
        lossRate: '',
        department: '',
        halfProduct: '',
        img: '',
      }
    },
    showTab(row) {
      this.productName =  row.productName
      this.productNo = row.productNo
      this.form = row
      this.showCard = true;
    },
    handleQuery() { },
    resetQuery() { },
    handleExport() { },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 根据产品代号展示所有数据
    handleSelectProductNo(data){
      console.log(data);
      
      if(data =='1001'){
        this.$nextTick(() => {
          this.resetForm()
          this.formMaterial = this.productList[0]
        })
        
      }
      else if(data == '1002'){
        this.$nextTick(() => {
          this.resetForm()
        this.formMaterial = this.productList[1]
        })
      }
      else if(data == '1003'){
        this.$nextTick(() => {
          this.resetForm()
        this.formMaterial = this.productList[2]
        })
      }
      
      // this.formMaterial = this.productList.find(item => item.productNo == data)
      this.$nextTick(() => {
      this.formMaterial.parentProductNo = this.productNo;
      this.formMaterial.productNo = data;
      })
      
    }
    
    
  },

}
</script>

<style>
.selected-row {
  background-color: yellow !important;
  /* 选中行的背景颜色 */
}
</style>
